<template>
  <div class="channel">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row class="btn-gruop">
      <el-button v-for="item in btn" :key="item.code" @click="active = item.code" :type="active === item.code ? 'primary' : 'text'" size="small">{{ item.name }}</el-button>
    </el-row>
    <el-row>
      <h4 style="border-bottom:1px solid #ddd;padding-bottom:20px">商户基础信息</h4>
      <el-button type="warning" size="small" class="mr20" @click="handleClickWindowOpen">查看详情</el-button>
      <span class="mr20">商户基础信息 <i :class="status.base_chk_status === 10 ? 'el-icon-remove-outline tip' : status.base_chk_status === 20 ? 'el-icon-circle-check-outline succ' : status.base_chk_status === -10 ? 'el-icon-circle-close-outline err' : ''"></i></span>
      <span class="mr20">账户信息 <i :class="status.bank_chk_status === 10 ? 'el-icon-remove-outline tip' : status.bank_chk_status === 20 ? 'el-icon-circle-check-outline succ' : status.bank_chk_status === -10 ? 'el-icon-circle-close-outline err' : ''"></i></span>
      <span class="mr20">负责人信息 <i :class="status.leader_chk_status === 10 ? 'el-icon-remove-outline tip' : status.leader_chk_status === 20 ? 'el-icon-circle-check-outline succ' : status.leader_chk_status === -10 ? 'el-icon-circle-close-outline err' : ''"></i></span>
      <span class="mr20">联系人信息 <i :class="status.contact_chk_status === 10 ? 'el-icon-remove-outline tip' : status.contact_chk_status === 20 ? 'el-icon-circle-check-outline succ' : status.contact_chk_status === -10 ? 'el-icon-circle-close-outline err' : ''"></i></span>
    </el-row>
    <el-row class="mt20">
      <h4 style="border-bottom:1px solid #ddd;padding-bottom:20px;margin-bottom:0;">通道信息</h4>
      <wx-channel v-if="active === 0" @update="handleIconUpdate"></wx-channel>
      <ali-channel v-if="active === 1" @update="handleIconUpdate"></ali-channel>
      <ws-channel v-if="active === 2" @update="handleIconUpdate"></ws-channel>
      <fu-channel v-else-if="active === 3" @update="handleIconUpdate"></fu-channel>
      <ls-channel v-else-if="active === 4" @update="handleIconUpdate"></ls-channel>
      <xdl-channel v-else-if="active === 5" @update="handleIconUpdate"></xdl-channel>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import WxChannel from '../item/wx-channel'
import AliChannel from '../item/ali-channel'
import WsChannel from '../item/ws-channel'
import LsChannel from '../item/ls-channel'
import FuChannel from '../item/fm-channel'
import XdlChannel from '../item/xdl-channel'
import { baseDetailsInit, merchanenlChannelGetStatus } from '@/api/shop'

export default {
  name: 'ReviewChannel',
  components: {
    Breadcrumb,
    WxChannel,
    AliChannel,
    WsChannel,
    LsChannel,
    FuChannel,
    XdlChannel
  },
  data() {
    return {
      active: null,
      status: {},
      btn: []
    }
  },
  methods: {
    handleClickWindowOpen() {
      const { href } = this.$router.resolve({
        name: 'channelBaseList',
        query: { merchant_num: this.$route.query.id }
      })
      window.open(href, '_blank')
    },
    handleIconUpdate() {
      merchanenlChannelGetStatus(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.active = null
          this.btn = res.data.result
        } else {
          this.active = null
          this.btn = []
          this.$router.go(-1)
        }
      })
    }
  },
  created() {
    baseDetailsInit(this.$route.query.id).then(res => {
      if (res.data.errorCode === 0) {
        this.status = res.data.result.info_status
      } else {
        this.$message.error(res.data.errorMsg)
        this.$router.go(-1)
      }
    })
    this.handleIconUpdate()
  }
}
</script>

<style lang="scss" scoped>
  .btn-gruop {
    border: 1px solid #ddd;
    padding: 8px 15px;
    .el-button {
      border-radius: unset;
      padding: 7px 15px;
    }
  }
</style>
